import { useAppSelector } from '@/hooks/useReduxHook'
import React from 'react'
import style from './RewordWall.module.scss'
import InfiniteScroll from 'react-infinite-scroller';
export default function RewordWall():React.ReactElement {
    const webInfo = useAppSelector(state => state.webInfo.webInfo)
    const admires = [
        {
          id: null,
          username: 'Sara',
          password: null,
          phoneNumber: null,
          email: null,
          userStatus: null,
          gender: null,
          openId: null,
          avatar: 'https://file.poetize.cn/userAvatar/Sara116383649934075',
          admire: '1000',
          subscribe: null,
          introduction: null,
          userType: null,
          createTime: null,
          updateTime: null,
          updateBy: null,
          deleted: null
        },
        {
          id: null,
          username: 'Chris',
          password: null,
          phoneNumber: null,
          email: null,
          userStatus: null,
          gender: null,
          openId: null,
          avatar: 'https://file.poetize.cn/randomAvatar/Sara116383641712031',
          admire: '40',
          subscribe: null,
          introduction: null,
          userType: null,
          createTime: null,
          updateTime: null,
          updateBy: null,
          deleted: null
        },
        {
          id: null,
          username: 'Cyberfish',
          password: null,
          phoneNumber: null,
          email: null,
          userStatus: null,
          gender: null,
          openId: null,
          avatar: 'https://file.poetize.cn/randomAvatar/Sara116383640738099',
          admire: '88.88',
          subscribe: null,
          introduction: null,
          userType: null,
          createTime: null,
          updateTime: null,
          updateBy: null,
          deleted: null
        },
        {
          id: null,
          username: 'Leslie',
          password: null,
          phoneNumber: null,
          email: null,
          userStatus: null,
          gender: null,
          openId: null,
          avatar: 'https://file.poetize.cn/randomAvatar/Sara116383640738096',
          admire: '18.88',
          subscribe: null,
          introduction: null,
          userType: null,
          createTime: null,
          updateTime: null,
          updateBy: null,
          deleted: null
        },
        {
          id: null,
          username: 'Evan',
          password: null,
          phoneNumber: null,
          email: null,
          userStatus: null,
          gender: null,
          openId: null,
          avatar: 'https://file.poetize.cn/randomAvatar/Sara116383640738096',
          admire: '20',
          subscribe: null,
          introduction: null,
          userType: null,
          createTime: null,
          updateTime: null,
          updateBy: null,
          deleted: null
        },
        {
          id: null,
          username: 'wyh382232907',
          password: null,
          phoneNumber: null,
          email: null,
          userStatus: null,
          gender: null,
          openId: null,
          avatar: 'https://file.poetize.cn/userAvatar/wyh100670168362755186683.jpg',
          admire: '10',
          subscribe: null,
          introduction: null,
          userType: null,
          createTime: null,
          updateTime: null,
          updateBy: null,
          deleted: null
        },
        {
          id: null,
          username: '张三',
          password: null,
          phoneNumber: null,
          email: null,
          userStatus: null,
          gender: null,
          openId: null,
          avatar: 'https://file.poetize.cn/randomAvatar/Sara116383641712039',
          admire: '9.99',
          subscribe: null,
          introduction: null,
          userType: null,
          createTime: null,
          updateTime: null,
          updateBy: null,
          deleted: null
        },
        {
          id: null,
          username: 'pengjunlee',
          password: null,
          phoneNumber: null,
          email: null,
          userStatus: null,
          gender: null,
          openId: null,
          avatar: 'https://file.poetize.cn/randomAvatar/Sara116383640738099',
          admire: '66.66',
          subscribe: null,
          introduction: null,
          userType: null,
          createTime: null,
          updateTime: null,
          updateBy: null,
          deleted: null
        },
        {
          id: null,
          username: 'xyan9i',
          password: null,
          phoneNumber: null,
          email: null,
          userStatus: null,
          gender: null,
          openId: null,
          avatar: 'https://file.poetize.cn/randomAvatar/Sara116383642997556',
          admire: '30',
          subscribe: null,
          introduction: null,
          userType: null,
          createTime: null,
          updateTime: null,
          updateBy: null,
          deleted: null
        },
        {
          id: null,
          username: 'yyds',
          password: null,
          phoneNumber: null,
          email: null,
          userStatus: null,
          gender: null,
          openId: null,
          avatar: 'https://file.poetize.cn/randomAvatar/Sara116383641712031',
          admire: '12',
          subscribe: null,
          introduction: null,
          userType: null,
          createTime: null,
          updateTime: null,
          updateBy: null,
          deleted: null
        },
        {
          id: null,
          username: 'ws- relax',
          password: null,
          phoneNumber: null,
          email: null,
          userStatus: null,
          gender: null,
          openId: null,
          avatar: 'https://file.poetize.cn/randomAvatar/Sara116383640738092',
          admire: '50',
          subscribe: null,
          introduction: null,
          userType: null,
          createTime: null,
          updateTime: null,
          updateBy: null,
          deleted: null
        }
      ]
  return (
    <>
    {
        admires && admires.length&&
        <div className={`shadow__box--mini wow ${style['admire__wrap']}`} style={ {backgroundImage: `url(${webInfo.admireBg})`} }>
          <div className={style['admire__title']}>🧨赞赏名单</div>
          <div className="scroll-region" style={{height: '200px', overflow: 'hidden'}}>
          <InfiniteScroll
          loadMore={()=>({})}
          hasMore={true}
          >
           {
            admires.map((item,i)=><div className="flex flex--b" key={i}>
             <div className="flex">
             <img
              className={style['admire__avatar-img']}
              src="https://img0.baidu.com/it/u=1752903520,1572100722&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1694019600&t=01d5595b10834ffe5a3ff0ee4bcf4b47"
            />
            <div className="admire__username">
              { item.username }
            </div>
             </div>
             <div className={style['admire__money']}>{ item.admire }元</div>
            </div>)
           }
          </InfiniteScroll>
          </div>
          <div className={style['admire__btn']}>赞赏</div>
        </div>
    }
    </>
  )
}
